<template>
  <div id="map-sou">
    <div id="ib">
      <div id="middle">
        <input
          type="text"
          placeholder="请输入您的出发地址"
          :value="xun"
          @input="search"
        />
      </div>
    </div>
    <div>
      <div :style="bian()" v-if="dingwei != ''">
        <div>#</div>
        <div>
          <p>{{ dingwei }}</p>
          <p>{{ dingwei }}</p>
        </div>
      </div>
      <div id="zong" v-for="(city, i) in cityarr" @click="jingwei(i)">
        <div>#</div>
        <div>
          <p>{{ city.name }}</p>
          <p>{{ city.city }}{{ city.district }}</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import map from "../assets/map";
export default {
  name: "dizhi",
  data() {
    return {
      xun: "",
      dingwei: "",
      chengshi: "",
      cityarr: Array,
      xiangxi: "",
      width: "100%",
      height: "12vh",
      display: "flex",
      borderBottom: "0.1vh solid rgb(197, 197, 199)",
      lng: "",
      lat: "",
    };
  },
  methods: {
    search(event) {
      this.xun = event.target.value;
      var _this = this;
      console.log(this.chengshi);
      this.axios
        .get(
          ` /poi/place/v2/suggestion?query=${this.xun}&region=${this.chengshi}&city_limit=true&output=json&ak=DyCLvR1jCuz5rxMe37kgWsz62xIQ1BxO`
        )
        .then((res) => {
          this.cityarr = res.data.result;
          console.log(this.cityarr);
        })
        .catch(function (err) {
          console.log(err);
        });
    },

    jieshou() {
      console.log("--------");
      this.chengshi = sessionStorage.getItem("chengshi");
      this.dingwei = sessionStorage.getItem("findcountry");
      this.lng = sessionStorage.getItem("lng");
      this.lat = sessionStorage.getItem("lat");
      // console.log(this.lng);
      // console.log(this.lat);
    },
    bian() {
      return {
        width: this.width,
        height: this.height,
        display: this.display,
        borderBottom: this.borderBottom,
      };
    },
    jingwei(i) {
      var _this = this;
      this.xiangxi = this.cityarr[i].address;
      sessionStorage.setItem("name", this.cityarr[i].name);
      if (this.cityarr[i].address) {
        map.init().then((BMap) => {
          var myGeo = new BMap.Geocoder();
          // 根据坐标得到地址描述
          console.log(this.xiangxi);
          myGeo.getPoint(
            this.xiangxi,
            function (result) {
              if (result) {
                var lng = result.lng;
                var lat = result.lat;
                sessionStorage.setItem("lng", lng);
                sessionStorage.setItem("lat", lat);
              }
            },
            this.chengshi
          );
        });
      } else {
        console.log("没有获取到经纬度");
        console.log(this.lng, this.lat);
        sessionStorage.setItem("lng", this.lng);
        sessionStorage.setItem("lat", this.lat);
      }
      this.$router.push({ name: "jiaxiao" });
      this.xun = "";
      this.cityarr = Array;
    },
  },
  created() {
    console.log("我已经创建");
    this.jieshou();
  },
  watch: {
    $route(to, from) {
      console.log(to.path);
      console.log(form.path);
      if (from.path == "/") {
        this.jieshou();
        console.log('a');
      }
    },
  },
};
</script>
<style scoped>
#zong {
  width: 100%;
  height: 11.5vh;
  display: flex;
  border-bottom: 0.1vh solid rgb(197, 197, 199);
}
#ib {
  width: 100%;
  height: 6.7vh;
  background: rgb(238, 238, 238);
}
#middle {
  width: 73%;
  margin: 0 auto;
  height: 3.3vh;
}
#middle > input {
  width: 100%;
  margin: 1.5vh auto;
  height: 3.3vh;
}
</style>
